i tried to make an element appear after a user clicks on an image. i used classlist.toggle for that but when i click on the image the error message "Uncaught TypeError: Cannot read property 'toggle' of undefined" appears in the console. And of course it is not working 🙁
const plusbtn = document.querySelector(".btn-img");
const drop = document.getElementsByClassName("boxes")
plusbtn.addEventListener('click', () => {
drop.classList.toggle("box-drop");
}).boxes {
border: 1px solid rgba(39, 81, 197, 0.39);
margin-top: 50px;
padding: 15px;
display: none;
flex-direction: row;
justify-content: space-around;
}
.btn-img {
align-self: center;
filter: grayscale(50%);
cursor: pointer;
}
.box-drop {
display: flex;
}<section>
<h1>RESOURCES</h1>
<div class="resource-boxes">
<div class="box1">
<div class="top">
<img src="../images/plus.png" alt="" class="btn-img">
</div>
<div class="boxes">
<a href="">
<div class="minibox">
<span class="minibox-txt">Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet consectetur, adipisicing elit. Numquam, enim! </span>
</div>
</a>
</div>
</div>
</div>
</section>getElementsByClassName returns a HTMLCollection. You need to loop every element in that collection in order to access it.
But, since you already use .querySelector() you could as well
.querySelectorAll() which returns a NodeList which offers by default a .forEach() Method.u-none{ display: none; }const EL_btnPlus = document.querySelector(".btn-img");
const ELS_drop = document.querySelectorAll(".boxes");
EL_btnPlus.addEventListener('click', () => {
ELS_drop.forEach(EL => EL.classList.toggle("u-none"));
});.boxes {
display: flex;
}
/* Utility classes */
.u-none {
display: none;
}<img class="btn-img" src="https://lh3.googleusercontent.com/a/AATXAJzyljorAsMuzZ3OQ6B7g_2EU0bkA4lk3iH076AR=k-s64" alt="">
<div class="boxes u-none">Box one</div>
<div class="boxes u-none">Box two</div>drop is a list of elements (see the return value of getElementsByClassName). You have to loop through it and toggle the class on each individual element:
const plusbtn = document.querySelector(".btn-img");
const drop = [...document.getElementsByClassName("boxes")];
plusbtn.addEventListener('click', () => {
drop.forEach(e => e.classList.toggle("box-drop"));
}).boxes {
border: 1px solid rgba(39, 81, 197, 0.39);
margin-top: 50px;
padding: 15px;
display: none;
flex-direction: row;
justify-content: space-around;
}
.btn-img {
align-self: center;
filter: grayscale(50%);
cursor: pointer;
}
.box-drop {
display: flex;
}<section>
<h1>RESOURCES</h1>
<div class="resource-boxes">
<div class="box1">
<div class="top">
<img src="https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=48&d=identicon&r=PG&f=1" alt="" class="btn-img">
</div>
<div class="boxes">
<a href="">
<div class="minibox">
<span class="minibox-txt">Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet consectetur, adipisicing elit. Numquam, enim! </span>
</div>
</a>
</div>
</div>
</div>
</section>